<template>
  <!-- 头部字 -->
  <view class="head">
    <view class="top"></view>
    <view class="txt">{{ store.num }}</view>
  </view>
  <!-- 抑郁测试图 -->
  <view class="Img">
    <image
      src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/nav-yiyu.png"
      mode="aspectFill"
    ></image>
  </view>
  <!-- 导航一 -->
  <view class="nav">
    <view
      class="nav-item"
      @click="goDetail(index)"
      v-for="(item, index) in vaccineList"
      :key="index"
    >
      <image class="nav-image" :src="item.image"></image>
      <text class="nav-text">{{ item.title }}</text>
    </view>
  </view>
  <!-- 导航二 -->
  <view class="navTwo">
    <view
      class="navTwo-item"
      @click="go(index)"
      v-for="(item, index) in reserveList"
      :key="index"
    >
      <text>{{ item.title }}</text>
      <text>{{ item.describe }}</text>
      <image class="navTwo-image" :src="item.image"></image>
    </view>
  </view>
  <!-- 热门挂号 -->
  <view class="hotRegister">
    <view class="txt">
      <p>热门挂号</p>
      <p>查看更多 ></p>
    </view>
    <view class="hotRegister-list" v-if="popularList">
      <view
        class="hotRegister-item"
        :style="{ backgroundColor: item.background }"
        @click="goDoctor(item.dep_id)"
        v-for="(item, index) in popularList"
        :key="index"
      >
        <text>{{ item.title }}</text>
        <image :src="item.image" mode="widthFix"></image>
      </view>
    </view>
  </view>
  <!-- 健康自测 -->
  <view class="Health">
    <view class="health">健康自测</view>
    <view class="health-box" v-if="self_test1">
      <view class="health-first" @click="goCePin">
        <p class="first">{{ self_test1 ? self_test1.name : "" }}</p>
        <p class="two">{{ self_test1 ? self_test1.describe : "" }}</p>
        <p class="three">
          <span class="three-first">{{
            self_test1 ? self_test1.number_of_people : ""
          }}</span>
          <span class="three-two"
            >人测过/{{ self_test1 ? self_test1.question : "" }}题/{{
              self_test1 ? self_test1.minute : ""
            }}分钟</span
          >
        </p>
        <image
          mode="widthFix"
          :src="self_test1 ? self_test1.image : ''"
        ></image>
      </view>
      <view class="health-two-list">
        <view
          class="health-two-item"
          @click="goCePin1(index)"
          v-for="(item, index) in self_test2"
          :key="index"
        >
          <p class="two-first">{{ item.name }}</p>
          <p class="two-two">{{ item.question }}题/{{ item.minute }}分钟</p>
          <p class="two-three">
            <span class="two-span1">{{ item.number_of_people }}</span>
            <span class="two-span2">人测过</span>
          </p>
          <image :src="item.image" mode="heightFix"></image>
        </view>
      </view>
    </view>
    <button @click="changeNum">++</button>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useCounterStore } from "@/strore/counter";
const store = useCounterStore();
import type {
  VaccineT,
  ReserveT,
  PopularT,
  selfTest1T,
  selfTest2T,
} from "../../types/type";
import { api } from "../../api/api";
const menu_top = ref<string>("");
const menu_height = ref<string>("");

// 获取数据
onMounted(() => {
  const menuInfo = uni.getStorageSync("menuInfo") as {
    top: string;
    height: string;
  };
  menu_top.value = menuInfo.top + "px";
  menu_height.value = menuInfo.height + "px";
  getList();
});

// 数据List
const vaccineList = ref<VaccineT[]>([]);
const reserveList = ref<ReserveT[]>([]);
const popularList = ref<PopularT[]>([]);
// 健康自测第一块
const self_test1 = ref<selfTest1T>();
// 健康自测第二，三块
const self_test2 = ref<selfTest2T[]>();
const getList = async () => {
  const res: any = await api.frontpage();
  console.log(res.data);
  vaccineList.value = res.data[0].vaccine;
  reserveList.value = res.data[1].reserve;
  popularList.value = res.data[2].popular;
  self_test1.value = res.data[3].self_test[0];
  self_test2.value = [res.data[3].self_test[1], res.data[3].self_test[2]];
};
// 去预约
const goDetail = (index: number) => {
  switch (index) {
    case 0:
      uni.navigateTo({
        url: "/navPage/vaccine/vaccine",
      });
      break;
    case 1:
      uni.navigateTo({
        url: "/navPage/hpv/hpv",
      });
      break;
    case 2:
      uni.navigateTo({
        url: "/navPage/nucleic/nucleic",
      });
      break;
    case 3:
      uni.navigateTo({
        url: "/navPage/consultation/consultation",
      });
      break;
  }
};
const go = (index: number) => {
  switch (index) {
    case 0:
      uni.switchTab({
        url: "/pages/register/register",
      });
      break;
    case 1:
      uni.navigateTo({
        url: "/navPage/tijianyuyue/tijianyuyue",
      });
      break;
  }
};
const goDoctor = (id: string) => {
  uni.navigateTo({
    url: "/navPage/doctor/doctor?dep_id=" + id,
  });
};
// 抑郁测评
const goCePin = () => {
  uni.navigateTo({
    url: "/pages/yiyuceping/yiyuceping",
  });
};
const goCePin1 = (index: number) => {
  switch (index) {
    case 0:
      uni.navigateTo({
        url: "/pages/zaoxieceping/zaoxieceping",
      });
      break;
    case 1:
      uni.navigateTo({
        url: "/pages/shimianceping/shimianceping",
      });
      break;
  }
};
function changeNum(){
  store.changeNum()
}
</script>

<style lang="scss" scoped>
// 头部定位
.head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  .top {
    height: v-bind(menu_top);
  }
  .txt {
    height: v-bind(menu_height);
    line-height: v-bind(menu_height);
    font-size: 35rpx;
    color: #fff;
    padding-left: 10px;
  }
}
// 抑郁测试图片
.Img {
  image {
    width: 100%;
    height: 500rpx;
    display: block;
  }
}
// 导航一
.nav {
  display: flex;
  justify-content: space-between;
  margin: 10rpx 0;
  .nav-item {
    flex: 1;
    text-align: center;
    .nav-image {
      width: 100rpx;
      height: 100rpx;
    }
    .nav-text {
      display: block;
    }
  }
}
// 导航二
.navTwo {
  display: flex;
  justify-content: space-between;
  padding: 0 15rpx;
  box-sizing: border-box;
  .navTwo-item:first-child {
    background: linear-gradient(to right, #d7dfff, #5b9fff);
  }
  .navTwo-item:last-child {
    background: linear-gradient(to right, #ffdbb4, #ffc66d);
  }
  .navTwo-item {
    width: 48%;
    height: 200rpx;
    padding: 20rpx 0 0 20rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    position: relative;
    image {
      position: absolute;
      bottom: 5rpx;
      right: 6rpx;
      width: 150rpx;
      height: 130rpx;
    }
    text {
      display: block;
    }
    text:first-child {
      font-size: 40rpx;
      color: #4f63eb;
    }
    text:nth-child(2) {
      color: #fff;
      margin-top: 20rpx;
    }
  }
}
// 热门挂号
.hotRegister {
  padding: 0 15rpx;
  box-sizing: border-box;
  .txt {
    font-weight: 600;
    margin: 20rpx 0;
    font-size: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .hotRegister-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .hotRegister-item {
      width: 31%;
      height: 100rpx;
      border-radius: 15rpx;
      margin: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      image {
        width: 60rpx;
      }
    }
    .hotRegister-item:nth-child(3),
    .hotRegister-item:nth-child(6),
    .hotRegister-item:nth-child(9) {
      margin-right: 0;
    }
  }
}
// 健康自测
.Health {
  .health {
    font-weight: 600;
    font-size: 40rpx;
    padding: 0 10rpx;
    margin: 10rpx 0;
  }
  .health-box {
    width: 100%;
    background-color: #fbfbfb;
    padding: 20rpx;
    box-sizing: border-box;
    .health-first {
      width: 100%;
      background-color: #fff;
      border-radius: 15rpx;
      padding: 20rpx 0 50rpx 20rpx;
      box-sizing: border-box;
      position: relative;
      .first {
        font-size: 35rpx;
      }
      .two {
        color: #cecece;
        margin-bottom: 20rpx;
      }
      image {
        position: absolute;
        bottom: 10rpx;
        right: 0;
        width: 200rpx;
      }
      .three {
        .three-first {
          font-size: 35rpx;
        }
        .three-two {
          color: #cecece;
        }
      }
    }
    .health-two-list {
      display: flex;
      justify-content: space-between;
      .health-two-item {
        position: relative;
        width: 48%;
        background-color: #fff;
        border-radius: 15rpx;
        padding: 20rpx 0 50rpx 20rpx;
        box-sizing: border-box;
        margin: 20rpx 0;
        .two-first {
          font-size: 35rpx;
        }
        .two-two {
          color: #cecece;
          margin-bottom: 20rpx;
        }
        .two-span1 {
          font-size: 35rpx;
        }
        image {
          position: absolute;
          bottom: 10rpx;
          right: 0;
          height: 120rpx;
        }
        .two-span2 {
          color: #cecece;
          // margin-bottom: 20rpx;
        }
      }
    }
  }
}
</style>
